﻿<template>
  <div class="evaluation-results">
    <div class="header">
      <el-icon class="back-icon" @click="router.back()">
        <ArrowLeft />
      </el-icon>
      <span class="title">我的测评结果</span>
    </div>

    <div class="results-list" v-loading="isLoading">
      <div v-if="evaluationResults.length === 0" class="empty-state">
        暂无测评结果
      </div>
      <div v-else class="result-items">
        <div
          v-for="result in evaluationResults"
          :key="result.id"
          class="result-item"
          @click="showDetail(result.id)"
        >
          <div class="result-content">
            <div class="result-title">{{ result.questionnaire?.title }}</div>
            <div class="result-score">得分：{{ result.total_score }}</div>
            <div class="result-time">{{ formatTime(result.created_at) }}</div>
          </div>
          <el-icon class="arrow-icon"><ArrowRight /></el-icon>
        </div>

       <!--<div class="load-more" v-if="hasMore">
          <el-button
            type="primary"
            link
            :loading="isLoading"
            @click="loadMore"
          >
            加载更多
          </el-button>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { Api } from '@/api'
import { useUserStore } from '@/stores/user.js'
import dayjs from 'dayjs'

const router = useRouter()
const userStore = useUserStore()
const evaluationResults = ref([])
const isLoading = ref(false)
const lastFetchedId = ref(null)
const hasMore = ref(true)

// 格式化时间
const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

// 获取测评结果
const fetchResults = async () => {
  if (isLoading.value) return
  isLoading.value = true
  try {
    const response = await Api.getUserPsychologyReports({
      user_id: userStore.user.id,
     // last_id: lastFetchedId.value
    })
    const newResults = response.data.data || []

    if (newResults.length > 0) {
      lastFetchedId.value = newResults[newResults.length - 1].id
      evaluationResults.value.push(...newResults)
    } else {
      hasMore.value = false
    }
  } catch (error) {
    console.error('获取测评结果失败:', error)
    ElMessage.error('获取测评结果失败，请稍后再试')
  } finally {
    isLoading.value = false
  }
}

// 加载更多
const loadMore = () => {
  fetchResults()
}

// 查看详情
const showDetail = (id) => {
  router.push(`/profile/evaluation/${id}`)
}

onMounted(() => {
  fetchResults()
})
</script>

<style scoped>
.evaluation-results {
  background-color: #f7f8fa;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
}

.back-icon {
  font-size: 20px;
  cursor: pointer;
  margin-right: 16px;
}

.title {
  font-size: 16px;
  font-weight: 500;
}

.results-list {
  margin-top: 10px;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #999;
  background-color: white;
}

.result-items {
  background-color: white;
}

.result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.result-item:active {
  background-color: #f7f8fa;
}

.result-content {
  flex: 1;
}

.result-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.result-score {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.result-time {
  font-size: 12px;
  color: #999;
}

.arrow-icon {
  color: #999;
  font-size: 16px;
  margin-left: 8px;
}

.load-more {
  text-align: center;
  padding: 16px;
}
</style>
